<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>垂直手风琴</title>
		<!-- 事先引入好的字体图标库 源码会放在简介 自行下载即可 -->
		<link rel="stylesheet" href="css/font-awesome.min.css" />
		<link rel="stylesheet" href="css/index.css" />
	</head>
	<body>
		<ul class="accordion">
			<li>
				<!-- 单选框的id属性值和label 元素的for属性值相同时,就可以通过label
				元素来选中单选框, 每个单选框都有一个相同name属性 -->
				<!-- 这个属性主要作用是用来将单选框分类的,当每个name属性值相同时,那么这一组单选框就只能同时选中一个 -->
				<input type="radio" name="item" id="item1" /><label for="item1"
					>一级标题1<i class="fa fa-caret-right"></i
				></label>
				<ol>
					<li>二级标题1</li>
					<li>二级标题2</li>
				</ol>
			</li>
			<li>
				<input type="radio" name="item" id="item2" /><label for="item2"
					>一级标题2<i class="fa fa-caret-right"></i
				></label>
				<ol>
					<li>二级标题1</li>
					<li>二级标题2</li>
					<li>二级标题3</li>
				</ol>
			</li>
			<li>
				<input type="radio" name="item" id="item3" /><label for="item3"
					>一级标题3<i class="fa fa-caret-right"></i
				></label>
				<ol>
					<li>二级标题1</li>
					<li>二级标题2</li>
					<li>二级标题3</li>
					<li>二级标题4</li>
				</ol>
			</li>
			<li>
				<input type="radio" name="item" id="item4" /><label for="item4"
					>一级标题4<i class="fa fa-caret-right"></i
				></label>
				<ol>
					<li>二级标题1</li>
					<li>二级标题2</li>
					<li>二级标题3</li>
					<li>二级标题4</li>
				</ol>
			</li>
		</ul>
	</body>
</html>
